<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
  <link rel="shortcut icon" href="images/topLogo.png">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/Home.css">
</head>

<body>
  <div id="CenterBox">
    <!-- 顶部 -->
    <!-- 顶部导航栏 -->
    <div class="dht dht-top intop">
      <!-- 导航栏Logo Or 主题-->
      <div class="dht-header">
        <!-- 在顶部时显示 -->
        <a class="dht-brand dht-tit" href="#" style="color: white; font-size: 16px; margin-top: 5px;margin-left: 10px;">
          <img src="images/smallLogo.png" style="display:inline-block;">首页
        </a>
        <!-- 不在顶部时显示 -->
        <a class="dht-brand dht-tit onshow" href="#">
          <img src="images/BLogo.png" width="54" height="26" style="margin-top: 15px; margin-left: 10px;">
        </a>
      </div>
      <!-- 左 -->
      <div class="dht-brand dht-top-left">
        <ul>
        </ul>
      </div>
      <!-- 右 -->
      <div class=" dht-brand dht-top-right">
        <ul>

        </ul>
      </div>
    </div>

    <header class="Htop">
      <div class="bg_video">
        <video muted src="images/bg.mp4" autoplay loop></video>
        <img class="logoB" src="images/logB.png" alt="">
      </div>

      <div class="bili-header">
        <div class="header-left">
          <a href="#" class="header-tb">
            <i class="bi bi-bullseye her-tb" style="background-color: #ff9212;"></i><br>
            <span>动态</span>
          </a>
          <a href="#" class="header-tb">
            <i class="bi bi-lightning-charge her-tb"></i><br>
            <span>热门</span>
          </a>
          <a href="#" class="header-tb">
            <i class="bi bi-megaphone her-tb" style="background-color:#59ca73 ;"></i><br>
            <span>频道</span>
          </a>
        </div>
        <div class="header-center">
        </div>
        <div class="header-right">
        </div>
      </div>
    </header>
    <!-- 主体内容 -->
    <main class="main">
      <div class="m-l">
        <div class="swiper">
          <ivd class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/lb1.png" alt="" width="562" height="316"><br>
              <span>亲测：这BUG真好玩嘿！</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb2.png" alt="" width="562" height="316"><br>
              <span>感觉在造一些很新的东西</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb3.png" alt="" width="562" height="316"><br>
              <span>周依然梁靖康雨中拥抱太甜了</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb4.png" alt="" width="562" height="316"><br>
              <span>现在的种田游戏怎么这么多？</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb5.png" alt="" width="562" height="316"><br>
              <span>4台手机……有多硬核？</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb6.png" alt="" width="562" height="316"><br>
              <span>感觉在造一些很新的东西</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb7.png" alt="" width="562" height="316"><br>
              <span>“亿”点点害怕</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb8.png" alt="" width="562" height="316"><br>
              <span>原来是这样瞄准的？</span>
            </div>
            <div class="swiper-slide">
              <img src="images/lb9.png" alt="" width="562" height="316"><br>
              <span>走近荒木庄之夜</span>
            </div>
          </ivd>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>


      </div>
      <div class="m-r">
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 125.7万</span>
             <span class="spdal bi bi-card-text"> 945</span>
             <span class="spdal"> 1:22</span>
              </div>
            </div>
            <img src="images/m1.png" alt="一起去海边玩好不好～">
          </div>
          <div class="spData">
            <p class="spTil">一起去海边玩好不好～</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>成长中的崽啊 · 10-4
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 68.7万</span>
             <span class="spdal bi bi-card-text"> 2841</span>
             <span class="spdal"> 39:14</span>
              </div>
            </div>
            <img src="images/m2.png" alt="一口气看完爆笑电视剧《东北插班生》今年电视剧最大黑马！">
          </div>
          <div class="spData">
            <p class="spTil">一口气看完爆笑电视剧《东北插班生》今年电视剧最大黑马！</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>九色鹿追剧 · 10-4
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 129.7万</span>
             <span class="spdal bi bi-card-text"> 988</span>
             <span class="spdal"> 01:15</span>
              </div>
            </div>
            <img src="images/m3.png" alt="停播通知，要结婚了。">
          </div>
          <div class="spData">
            <p class="spTil">停播通知，要结婚了。</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>京昭宝 · 9-30
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 219.8万</span>
             <span class="spdal bi bi-card-text"> 1.1万</span>
             <span class="spdal"> 13:49</span>
              </div>
            </div>
            <img src="images/m4.png" alt="【医案寻踪】你喝的水健康吗？I 一个流传20年的资本骗局">
          </div>
          <div class="spData">
            <p class="spTil">【医案寻踪】你喝的水健康吗？I 一个流传20年的资本骗局</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>兔叭咯 · 9-25
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 43.5万</span>
             <span class="spdal bi bi-card-text"> 839</span>
             <span class="spdal"> 04:14</span>
              </div>
            </div>
            <img src="images/m5.png" alt="国创灵幻题材动画新作《天灵道人》，个人制作独立动画短片（spine制作...">
          </div>
          <div class="spData">
            <p class="spTil">国创灵幻题材动画新作《天灵道人》，个人制作独立动画短片（spine制作...</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>老不浪 · 10-2
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 255.5万</span>
             <span class="spdal bi bi-card-text"> 2190</span>
             <span class="spdal"> 02:32</span>
              </div>
            </div>
            <img src="images/m6.png" alt="哪个鬼才教你这么二创的？！DNA都给我创碎了！">
          </div>
          <div class="spData">
            <p class="spTil">哪个鬼才教你这么二创的？！DNA都给我创碎了！</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>MJ小林大人嗷 · 10-3
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 98.7万</span>
             <span class="spdal bi bi-card-text"> 841</span>
             <span class="spdal"> 11:12</span>
              </div>
            </div>
            <img src="images/m7.png" alt="长隆让我觉得205块钱门票不亏的瞬间.mp4">
          </div>
          <div class="spData">
            <p class="spTil"> 长隆让我觉得205块钱门票不亏的瞬间.mp4</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>bili_80435587 · 10-4
            </span>
          </div>
        </div>
        <div class="spVideo">
          <div class="sp">
            <div class="spzz">
             
              <div class="spda">
              <span class="spdal bi bi-play-btn"> 9109</span>
             <span class="spdal bi bi-card-text"> 6</span>
             <span class="spdal"> 00:17</span>
              </div>
            </div>
            <img src="images/m8.png" alt="中二病也要黑坤坤">
          </div>
          <div class="spData">
            <p class="spTil">中二病也要黑坤坤</p>
            <span class="spz hb">
            <i class="bi bi-cc-circle"></i>奈川不会漫剪 · 10-6
            </span>
          </div>
        </div>

      </div>
    </main>
    <!-- 底部 -->
    <footer>
      <div class="footer-top">
        <div class="fotter-top-left">
          <span>bilibili</span>
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">用户协议</a>
          <a href="#">加入我们</a>
          <a href="#">友情链接</a><br>
          <a href="#">隐私协议</a>
          <a href="#">bilibili认证</a>
          <a href="#">Investor Relations</a>
        </div>
        <div class="fotter-top-left">
          <span>传送门</span>
          <a href="">协议汇总</a>
          <a href="">活动中心</a>
          <a href="">活动专题页</a>
          <a href="">侵权申诉</a>
          <a href="">帮助中心</a>
          <a href="">社区中心</a><br>
          <a href="">壁纸站</a>
          <a href="">广告合作</a>
          <a href="">名人堂</a>
          <a href="">MCN管理中心</a>
          <a href="">高级弹幕</a>
          <a href="">品牌号官网</a>
        </div>
        <div class="fotter-top-right">
          <div class="fotter-tb hovBox-t">
            <div class="hovBox-T">
              <img src="images/xz1.png">
            </div>
            <i class="bi bi-save footer-svg" style="background-color:#3752c8 ;"></i><br>
            <span>下载APP</span>
          </div>
          <div class=" fotter-tb">
            <i class="bi bi-balloon-heart footer-svg" style="background-color:#00aeec;"></i><br>
            <span>公益</span>
          </div>
          <div class="fotter-tb">
            <i class="bi bi-twitch footer-svg" style="background-color:#db4437;"></i><br>
            <span>官方微博</span>
          </div>
          <div class="fotter-tb">
            <i class="bi bi-wechat footer-svg" style="background-color:#57bb40 ;"></i><br>
            <span>官方微信</span>
          </div>
        </div>
      </div>
      <div class="footer-center">
        <ul>
          <li><span href="#" class="hb">营业执照 </span> 信息网络传播视听节目许可证：0910417网络文化经营许可证
            沪网文【2019】3804-274号广播电视节目制作经营许可证：（沪）字第01248号增值电信业务经营许可证 沪B2-20100043</li>
          <li><span href="#" class="hb">互联网ICP备案：沪ICP备13002172号-3 </span>出版物经营许可证 沪批字第U6699 号互联网药品信息服务资格证
            沪-非经营性-2016-0143营业性演出许可证 沪市文演（经）00-2253 |</li>
          <li><span href="#" class="hb">不良信息举报邮箱：help@bilibili.com</span> <span href="#"
              class="hb">涉未成年举报邮箱：teenprotect@bilibili.com</span>不良信息举报电话：4006262233转1
            <span href="#" class="hb"> 上海互联网举报中心 |</span><span href="#" class="hb"> 12345政务服务便民热线 |</span></li>
          <li>沪公网安备31011002002436号 |儿童色情信息举报专区 |扫黄打非举报</li>
          <li>网上有害信息举报专区：
            中国互联网违法和不良信息举报中心亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</li>
          <li>公司名称：上海宽娱数码科技有限公司 |公司地址：上海市杨浦区政立路485号 |电话：021-25099888</li>
        </ul>

      </div>
      <div class="footer-bottom">
        <img src="images/db1.png" alt="" width="96" height="39">
        <img src="images/db2.png" alt="" width="96" height="39">
        <img src="images/db3.png" alt="" width="96" height="39">
      </div>
    </footer>

  </div>
  <!-- 加载依赖插件 -->
  <script src="js/jquery-3.6.1.min.js"></script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/index.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper', {
      loop: true, // 循环模式选项
      autoplay: true,

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })
  </script>
</body>

</html>